<template>
  <div class="wholesale-detail">
    <div class="block">
      <header>
        <h2>报台详情</h2>
      </header>
      <section>
        <el-row :gutter="80">
          <el-col :span="9">
            报台单编号
            <span>{{detailData.orderCode?detailData.orderCode:''}}</span>
          </el-col>
          <el-col :span="9">
            报台单状态
            <span>{{detailData.orderStatusName?detailData.orderStatusName:''}}</span>
          </el-col>
          <el-col :span="9">
            供应商
            <span>{{detailData.supplierName?detailData.supplierName:''}}</span>
          </el-col>
          <el-col :span="9">
            经销商
            <span>{{detailData.companyName?detailData.companyName:''}}</span>
          </el-col>
        </el-row>
      </section>
      <div class="hr" />
      <section>
        <el-row :gutter="80">
          <el-col :span="9">
            销售对象
            <span>{{detailData.saleTargetName?detailData.saleTargetName:''}}</span>
          </el-col>
          <el-col :span="9">
            销售日期
            <span>{{detailData.saleDate?detailData.saleDate:''}}</span>
          </el-col>
          <el-col :span="9">
            产品线
            <span>{{detailData.productLineName?detailData.productLineName:''}}</span>
          </el-col>
          <el-col :span="9">
            产品总数量
            <span>{{detailData.productCount?detailData.productCount:''}}</span>
          </el-col>
          <el-col :span="9">
            产品总金额(元)
            <span>{{detailData.orderAmount?detailData.orderAmount:''}}</span>
          </el-col>
          <el-col :span="9">
            备注
            <span>{{detailData.remark?detailData.remark:''}}</span>
          </el-col>
        </el-row>
      </section>
      <!-- <p class="daozhang" v-if="detailData.isAccount === 2">
        <img src="~assets/img/daozhangshibai.png" alt /> 到账失败原因：银行清算失败，支付金额原路返回
      </p>-->
      <p style="height:8px;"></p>
    </div>
    <div class="block">
      <header>
        <h2>产品信息</h2>
      </header>
      <section>
        <el-editable
          stripe
          v-loading="tableLoading"
          :columns="C0LUMNS"
          :data="payload.content"
          :payload="payload"
          :needPagination="true"
          @reload="reloadPagination"
          height="400"
        ></el-editable>
      </section>
    </div>
    <div class="block">
      <header>
        <h2>其他信息</h2>
      </header>
      <section>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="附加信息" name="first">
            <p v-if="orderAppendPOS.length === 0" style="color:#999999;margin-left:40px">暂无信息</p>
            <el-row v-else :gutter="80">
              <el-col :span="8" v-for="(item,index) in orderAppendPOS" :key="index">
                {{item.attributeName}}
                <span>{{item.attributeType === 3?item.selectName?item.selectName:"":item.attributeValue?item.attributeValue:""}}</span>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="发票信息" name="second">
            <el-editable height="400" :data="invoiceData" :columns="INVOICE_COLUMNS" stripe>
              <template slot="default-url" slot-scope="scope">
                <TableUpload
                  :imgsrc="scope.row.url"
                  :imgname="scope.row.fileName"
                  :keystr="scope.$index"
                ></TableUpload>
              </template>
            </el-editable>
            <!-- <h3 v-else style="color:#999999;margin-left:40px;">暂无信息</h3> -->
          </el-tab-pane>
          <el-tab-pane label="其他附件" name="third">
            <el-editable height="400" :data="otherData" :columns="OTHER_COLUMNS" stripe>
              <template slot="default-fileUrl" slot-scope="scope">
                <TableUpload
                  :imgsrc="scope.row.fileUrl"
                  :imgname="scope.row.fileName"
                  :keystr="scope.$index"
                ></TableUpload>
              </template>
            </el-editable>
            <!-- <h3 v-else style="color:#999999;margin-left:40px;">暂无信息</h3> -->
          </el-tab-pane>
        </el-tabs>
      </section>
    </div>
  </div>
</template>
<script src="./index.js"></script>

<style lang="less" src="./index.less" scoped></style>
